<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>楼梯导航</title>
	<script src="jquery-1.12.3.min.js"></script>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			padding-bottom: 500px;
		}
		ul{
			width: 50px;
			height: 200px;
			position: fixed;
			top: 30%;
			left: 20px;
		}
		li{
			list-style: none;
			text-align: center;
			line-height: 38px;
			height: 38px;
			border:1px solid red;
			background-color: #ccc;
			cursor: pointer;
		}
		li:hover{
			background-color: black;
		}
		div{
			height: 500px;
			width: 100%;
		}
		.d1{
			background-color: green;
		}
		.d2{
			background-color: yellow;
		}
		.d3{
			background-color: #ccc;
		}
		.d4{
			background-color: blue;
		}
		.d5{
			background-color: orange;
		}
	</style>
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
	<div class="d1"></div>
	<div class="d2"></div>
	<div class="d3"></div>
	<div class="d4"></div>
	<div class="d5"></div>

	<script>
		$(function(){
			// $("ul li").each(function(index,element){
			// 	$(element).click(function(){
			// 		// console.log(1)
			// 		var index=$(element).index();
			// 		console.log(index)
			// 		var divTop=$("div").eq(index).offset().top;
			// 		$(window).scrollTop(divTop);
			// 	})
			// })
			$("ul li").click(function(){
				var index=$(this).index();
				var divTop=$("div").eq(index).offset().top;
				$(window).scrollTop(divTop)
			})
		})
	</script>
</body>
</html>